Vue组件入门篇 —— 表单组件

脚本之家

你与百万开发者在一起

作者 | 自然框架

出品 | 脚本之家（ID：jb51net）

做项目的时候会遇到一个比较头疼的问题，一个大表单里面有好多控件，一个一个做设置太麻烦，更头疼的是，需求还总在变化，一会多选、一会单选、一会下拉的，变来变去的烦死宝宝了。

那么怎么解决这个问题呢？我们可以做一个组件来搞定这些烦人的事情。我们使用Vue.js基于原生HTML来做一套表单控件！

前端不管是哪种框架、类库，其基础都是HTML、CSS和JavaScript，不管用什么方式写项目，我们都有必要先了解一下基础知识。所以呢我们先来看看HTML5的表单和表单元素都有哪些属性以及功能。

HTML5原生的表单和表单元素

　　要想做好表单组件，必须先知道HTML5里面的表单和表单元素都有哪些属性，以及属性的效果和作用，否则的话可能折腾半天才发现，原来HTML5已经自带了这个功能！

　　比如要实现这样一个功能：文本框只能输入数字，然后要加上两个按钮，按一个数值+1，按另一个数值-1。以前要写js代码实现，现在只需要把type改成number就可以了。而且可以对输入的文字做拦截，非数字根本输入不进去，这样就不用我们自己再去写代码实现了。所以磨刀不误砍柴工，我们先来整理一下，表单和表单属性都有哪些属性。

表单属性

　　首先是表单（<form>）的属性，<form>的属性主要是对表单元素做一个统一设定，比如表单里的元素是否需要自动完成的功能，以及提交的时候是否需要做验证等。如果某个表单元素不符合这个统一设定的话，可以给表单元素单独设置属性进行说明。这样就更灵活和方便了。

　　其他的就是通过submit按钮对表单进行一些控制的属性了。不过这些都是针对表单提交的，我们现在基本都是ajax，所以这些属性基本都用不上了。

表单元素的分类

　　表单元素都有哪些？说到分类就有点头疼，<intut>一开始理解是文本类的，输入嘛，结果现实却很丰满，提交按钮也用这个，还有单选和多选也是这个input。多行文本反倒不是这个了，而是单独的一个。不过不管那么多了，还是从使用的角度来分类：文本框类和选择类。

　　<intut>的type增加了一些新的类型，在PC机的浏览器里面看，区分不是很大，但是到了手机浏览器里面，区分就比较大了，主要是可以控制打开的输入法的默认模式。比如number，打开输入法之后，直接就是数字方式，这个就很人性化，方便用户操作。

　　我们先看一下分类：

HTML5新增特性

　　新增的特性（好吧也不算新了，都好多年了），主要是对文本框的增强，增加了一些类型以及辅助功能，比如增加了一个备选框（<datalist>）的功能，这个还是比较实用的吧。

在手机网页里的展现效果

　　表单元素在PC浏览器里是什么样子的，大家很容易看到，那么在手机浏览器里是什么样子的呢？先看一下表单整体效果：

　　注意看那几个带下三角的，那个不是下拉列表框，而是日期相关的，可以选择日期时间等。具体效果我们一个一个看。

1、单行文本type="text"
　　还是老样子的文本框，也是使用最多的表单元素。还是原来的样子，不贴图了。

2、多行文本<textarea > </textarea>
 　　一般会被富文本编辑器代替。还是不贴图了。

3、密码 type="password"
　　这个就不一样了，系统不同表现也不同，比如某系统会变成系统特定的输入法，而不是用户设定的输入法，并且不让截屏，所以我只好拍照片了。

4、日期 type="date"
 　　手机浏览器里面，如何方便的输入日期？很简单，只需要设置type=”date”就可以了，至于效果如何吗，就要看手机系统、版本、浏览器、输入法的了。我手头测试设备很少，不能全面测试，举一个作为例子，大家看一下效果图：

5、日期时间 type="datetime-local"
　　这个不仅可以选择日期，还可以选择时间。不过要注意type="datetime"是不行的（各大浏览器都不支持），要用type="datetime-local"才行。不多说了，看图。

6、时间 type="time"
 　　单独选择时间的。

7、月份 type="month"
　　选择年和月的，不是只有月份。

8、周 type="week"
 　　同理，也是选择年和周，一年内第多少周。

9、上传文件和图片 type="file"
　　上传功能，有一个特性，可以调用手机摄像头（后摄）拍照，然后还可以访问拍下来的照片，于是就产生了一种功能，扫码二维码。在网上找了半天，已经有测试成功的了。以前以为手机浏览器无法扫二维码呢，现在看来也是可以的。悄悄的透露一下地址：https://blog.csdn.net/yisuowushinian/article/details/50548742

10、选择颜色 type="color"
 　　可以调用系统的调色板，选择颜色，不过对于我这样没有艺术细胞的人，只能是瞎点。

11、数字 type="number"
 　　这个首先可以设定输入法为数字状态，不用再从中文改成数字了，省去用户的一个步骤，有些版本还可以限制用户更换状态。想输入英文、汉字是没戏了，不过还是有点小问题，因为小数点、正负号、e都属于合法字符，所以可以输入，但是却没有判断数量和位置。
　　比如小数点可以输入n个，+-号可以任意位置输入。这就有点郁闷了。还有科学计数法的e，这个我都忽略了，看到能输入e想了半天才想起来想的很周到，但是我输入eeee，也是可以的。既然都做了限制，为啥不顺便限制一下数量呢？

12、电话号码 type="tel"
　　这个嘛，有些版本会设定输入法为数字状态，有些版本就没啥效果了，如果电话号里面只有数字的话，建议用number的方式。

13、电子邮件 type="email"
　　这个也基本没啥效果。输入法应该出现@、 .com、 163.com 这类的快捷输入的，可是没有发现。不知道其他系统或者输入法有没有。

14、网址 type="url"
 　　可以设定输入法为英文状态，但是没有出现http:// 、.com、.cn、www 这类的快捷输入。

15、滑块 type="range"
 　　这个好像以前就有，只是不常用。不贴图了，也没啥弹出效果，直接拽就好。

16、查询 type="search"
　　这个唯一特点就是输入信息后，右侧可以出现一个“X”，按一下就会清空文本框。

17、datalist
  　　这个是给文本框提供一个像下拉列表框那样的备选项，还是比较实用的，只是有一个小问题，他自带过滤功能，比如输入 a 那么只会保留a开头的备选项，其他的 就都消失了。如果输入了信息只会，想换成其他备选项的话，就需要先清空才行，否则其他选项是不会出现了。不过好在我们有search，还记得他有什么功能吗？那个x。好了这两个似乎是绝配了。

Vue组件的基础知识

　　表单这一块为啥要做成组件呢？因为要复用呀。一个表单里面有很多很多文本框、下拉列表框，一个项目又有很多很多的表单？如果一个一个的设置属性，是不是太麻烦。如果需求变化了，要先找到这个*.vue，然后再去修改对应的属性。好麻烦的说。如果做成组件，不仅仅可以达到复用的效果，还可以做到业务需求和代码的分离！

组件之hello word

　　先做一个简单的组件看看组件到底是啥样子的。下面是官网的例子（加了一个props），我们来分析一下。

1. Vue.component('button-counter', {

2. props:["value"],

3. data: function() {

4. return {

5. count: 0

6. }

7. },

8. template: `<button v-on:click="count++">

9. You clicked me {{ count }} times.{{value}}</button>`

10. });

11. new Vue({ el: '#components-demo' });

1. <div id="components-demo">

2. <button-counter value="3"></button-counter>

3. <button-counter></button-counter>

4. <button-counter></button-counter>

5. <button-counter></button-counter>

6. </div>

　　首先使用Vue.component('button-counter', {}) 注册一个组件。第一个参数就是组件的名称，后面的参数是组件的实现代码，其中包括属性（props）、内部变量（data）、模板（template）、方法（methods）等。其实组件和vue的实例还是很像的，最明显的就是多了个属性（props）和模板。

　　属性（props）是把组件外部的数据传递到组件内部，是一个很基础的数据传递方式。可以传递的数据类型也没有限制。数字、文本、对象都可以。

　　模板呢，就是组件内部的结构，编写方式和vue的实例是很像的。这里有个主意的地方，一开始我没注意看，“template:”后面跟的是啥？不是单引号哦，而是键盘左上角esc键下面的那个。这个符号终于派上用场了。是不是一直没按过？

　　用这个符号框起来的可以直接换行，这样就不用一行一行的“+’”了。

　　页面里使用的方式来引用，相当于我们自己定义了一个dom。当然这个dom是需要vue来解析的，没有vue解析的话浏览器是不会识别。运行的时候也是没有的，直接就是我们写的模板（绑定数据后）的内容。

　　data使用了function的形式，这个是在组件复用的时候区分多个组件的内部数据的。如果不用function的形式，复用的多个组件，将会共用同一个data值。

　　然后就是做一个vue的实例，对div进行托管。

　　表单是使用率最高的一个地方了，项目再小也要有个表单，那么如何更好的做好表单呢？我们思路就是————依赖注入。这个可不是sql注入攻击，大家不要弄混淆了。那么如何实现呢？让我们一一分析。

组件的特点和优势

　　我们为啥要做表单组件呢？首先要看看组件的优势了，优势都有哪些呢？封装和复用、切换表单元素的形式、适配各种UI。

1. 复用和封装
   　　等等，原生的表单元素不是也可以复用吗？为啥还要弄个组件？这个就要做一个对比了。用原生的方式做一个下拉列表框是啥样的呢？

1. <select>

2. <option value ="1">男</option>

3. <option value ="0">女</option>

4. </select>

　　要写好几行太麻烦了，如果封装一下，各种设置由组件内部解决，外部传参数就可以了，那么是不是可以很方便呢？
　　不管多复杂的表单元素，一行搞定，其他的交给组件内部处理。

      2.可以随意切换“形态”

经理说，这个下拉列表框改成单选的形式吧，这样用户选着方便。

　　于是我们只好改成这样：

1. <input type="radio" checked="checked" name="Sex" value="1" />男性

2. <input type="radio" name="Sex" value="0" />女性

过两天经理又说了：哎呀，还是下拉列表框好看，你再改回去吧。

　　。。。。。。

　　真的吗？算了，经理说啥就是啥。看在工资的份上我忍！

　　经理的要求必须做到，没有讨论的余地。那么怎么办呢？只能改自己了。当然不是翻来覆去的手敲，而是做成组件！

　　比如：复选改单选，单选改下拉列表框。通过表单元素组件，改一下就可搞定。

3.适配器

　现在vue有好多好多UI组件，用哪个好呢？现在我们可以基于原生html封装一个表单控件，那么以后呢？是不是可以针对其他UI组件封装一个表单元素控件呢？然后只要能够保证接口不变，那么我们依赖这个组件写的代码就不需要改变。
　　最终要实现——换UI就换UI，不影响业务逻辑的代码。

　　现在看看写表单组件是不是很有必要了呢？

组件的双向绑定

　　对于表单元素，还有一个需要注意的地方，那就是数据的双向绑定！我们先来个简单的练练手，对 input 封装一下。

1. Vue.component('my-input', {

2. props:["value"],

3. template: `<input type="text"

4. :value="value"

5. @input="$emit('input',$event.target.value)"

6. :key="1">`

7. });

8. var form = new Vue({

9. el: '#components-demo',

10. data:{

11. formValue:{

12. v1:'22'

13. }

14. }

15. });

1. <div id="components-demo">

2. <my-input v-model="formValue.v1"></my-input>

3. {{formValue.v1}}

4. </div>

　　先看一下页面里的使用方法，是不是很熟悉的味道，熟悉的v-model，熟悉的大括号。
　　然后再看组件内部实现。

　　首先定义一个属性（props）value，用于接收组件外面传递的数据，然后模板里面要做两件事情：接收参数、返回用户输入的数据。

　　v-model是一个语法糖，外面可以直接用，但是组件内部就不能直接用了，必须拆成两块才行：一个是 :value给文本框赋值；另一个是监听input事件（代码第五行），然后使用$emit向组件外部传递值。$emit有两个参数，第一个参数是外部监听的事件，第二个参数（含后面的参数）是要传递出去的数值。

　　可能大家看着有点晕，两个input是咋回事，我们来改变一下，就都明白了。

@change="$emit('event1',Date.now())" 　　模板里加入这样一行。change是文本框的原生change事件，这里必须用原生的，不能用自定义的。

@change是让vue监听这个事件。 　　$emit 是向组件外面传递消息，第一个参数event1，是外部vue监听的事件，这个可以自定义，写啥都行。

　　第二个参数是要传递的值，这里Date.now()是当前时间，写$event.target.value 的话，就是文本框的值。也就是说，写啥都行，都可以传递出去。

<my-inputv-model="formValue.v1"@event1="fun"></my-input>

1. methods:{

2. fun:function(data) {

3. alert(data);

4. }

5. }

　　外部监听自定义event1事件，然后调用methods里的方法fun。

　　如果理解了，那么组件的消息传递算是基本掌握了。

表单元素组件

1. 需要哪些属性
     　　表单元素组件需要设置多少属性呢？这就是苦力活了，既然把input封装进来了，那么他的原生属性都应该能够支持，就是说要在外部可以设置。那么怎么办呢，如果一个个传递那还不如用原生的呢，所以我们设置一个对象属性，直接传递一个对象过来，这样就简单了。

 　　   　　熟悉了表单元素的属性之后，我们可以定义一个json来保存这些属性：

1. c1:{

2. //辅助

3. controlId: '150', // 编号，区别同一个表单里的其他控件

4. controlType: 101, // 用类型编号表示type

5. colName: '姓名', //中文名称

6. isClear: false, //isClear 连续添加时是否恢复默认值

7. //通用

8. disabled: false, // 是否禁用

9. required: true, //必填

10. pattern: '', //用正则做验证。

11. tabIndex:0, // tab 键顺序

12. class:'cssTxt input_t1',

13. title: '', //提示信息

14. //多行文本

15. rows:5, //行数

16. cols:100, //列数

17. //文本框类

18. name:'',

19. value: '',

20. placeholder: '请输入姓名',

21. readonly: false, //只读

22. size: 10, // 字符宽度

23. maxlength: 20, //最大字符数

24. autocomplete: 'on', //off

25. min: 1, // 最小值

26. max: 100, // 最大值

27. step: 1, // 步长

28. multiple: false, //是否可以有多个值，用于上传文件

29. listKey:'browsers', //备选文字标识

30. //选择类和备选文字的选项

31. list: [{

32. "id": "1",

33. "name": "北京",

34. "check": false

35. }

36. , {

37. id: '2',

38. name: '上海',

39. check: false

40. }, {

41. id: '3',

42. name: '广州',

43. check: false

44. }

45. ]

46. }

　　因为json的结构可以非常灵活的组合，所以这里设计一个大而全的结构，把所有需要的属性都放在一起，使用的时候，可以根据元素类型灵活取舍。

　　看到这里大家可能想，这样太复杂了，还不如直接使用原生的呢。大家先别急，看完下面这三点然后在下结论。

• 不是所有类型都需要这些属性，每一个类型用到的并不多。

• 可以写一个辅助工具来生成这个json，并不需要我们手撸代码。

• 可以根据文档自动生成这个json。
  比如纯文本框（type=”text”）可以简化为：

1. colName:{

2. controlId: 'colName', //ColumnID

3. controlType: 116,

4. class:'cssTxt input_t1',

5. placeholder: '请填写标题',

6. size: 30,

7. maxlength: 50

8. }

　　这样是不是简单多了呢？其实最简单的设置只需要 controlType 即可，其他的都可以不设置，但是也就意味着只能用默认的文本框，没有办法进行其他的设置。总之还是要看你要对表单进行多少设置。

文本框类的表单元素组件

　　说了这么多，还没看到代码，是不是等不急了呢？其实代码也没啥好说的，就是用了最笨的方法，一点一点设置属性。

1. Vue.component('my-input', {

2. props:["value","meta"],

3. data:function(){

4. return {

5. type:{ //把编号变成文本的形式

6. 100:'textarea', //多行文本框

7. 101:'text', //单行文本框

8. 102:'password', //密码

9. 103:'date', //日期

10. //其他略。。。。。。

11. }

12. }

13. },

14. methods:{

15. //text

16. textInput:function(event, meta){

17. var returnValue = event.target.value;

18. //添加自己的监听事件。本来想写在一起的，但是不好用，只好分开了。

19. //vue的回调

20. this.$emit('input',returnValue);

21. },

22. textChange:function(event, meta){

23. var returnValue = event.target.value;

24. //添加自己的监听事件

25. this.$emit('change', returnValue,event.target, meta);

26. }

27. },

28. template: `<span>

29. <span v-if="meta.controlType===100">

30. <!--多行文本框-->

31. <textarea :id="'c'+meta.controlId"

32. :name="'c'+meta.controlId"

33. :class="meta.class"

34. :readonly="meta.readonly"

35. :rows="meta.rows"

36. :cols="meta.cols"

37. @input="$emit('input',$event.target.value)"

38. @onkeyup="textChange($event,meta)"

39. :placeholder="meta.placeholder"

40. >

41. </textarea>

42. </span>

43. <span v-else-if="meta.controlType>100 && meta.controlType<130 ">

44. <!--文本框类-->

45. <input :id="'c'+meta.controlId"

46. :name="'c'+meta.controlId"

47. :disabled="meta.disabled"

48. :class="meta.class"

49. :type="type[meta.controlType]"

50. :value="value"

51. :placeholder="meta.placeholder"

52. :readonly="meta.readonly"

53. :size="meta.size"

54. :maxlength="meta.maxlength"

55. :autocomplete="meta.autocomplete"

56. :min="meta.min"

57. :max="meta.max"

58. :step="meta.step"

59. :multiple="meta.multiple"

60. :list="meta.listKey"

61. :title="meta.title"

62. @input="textInput($event,meta)"

63. @change="textChange($event,meta)"

64. :key="'ckey_'+meta.controlId">

65. <!--文本框的备选项-->

66. <datalist v-if="typeof(meta.listKey)!=='undefined'" :id="meta.listKey">

67. <option v-for="item in meta.list" :label="item.id" :value="item.name" />

68. </datalist>

69. </span>

70. });

1、属性

 　　value用于双向绑定，这个要单独设置，其他的属性统统放在meta里面。这样接口就固定了，以后需要新的属性也不用修改接口。

2、内部变量
 　　这个是为了做个替换，因为外部设置的是类型编号，而不是类型名称，所以内部需要做一个替换，这样浏览器才能识别。

　　那么为啥用编号，而不直接用浏览器支持的类型呢？因为有些类型要做两种用途，比如file上传文件和上传图片。两种方式要做个区分的，比如上传图片，可以做个图片预览，图片处理等功能，上传文件的话，就没有这些了。所以要做个编号加以区分。另外像多行文本框和下拉列表框用的不是input，没有type。

3、模板
 　　这里就很笨了，用v-if根据controlType做判断，是哪种控件就渲染对应的模板。然后把属性一一绑定上就可以了。

　　然后就是事件的绑定。因为用户输入内容后，要通知上层调用者，所以需要加个事件返回用户输入值。第一个input是给Vue准备的，加上这个才能实现Vue的双向绑定。

　　那么第二个事件是干啥的？有的时候我们自己需要知道用户的输入操作，依据输入做些操作，比如联动下拉列表框。我们要知道第一个下拉列表框的change，然后设置第二个下拉列表框。这个时候就需要我们自己的事件通知。一开始想在一个函数里通知两个上层事件的，但是没有成功。所以只好分开了。Emmm，也许可以改成数据驱动的方式，这个还没太想好。

4、方法
 　　写了两个方法，一个是返回给Vue的，实现数据双向绑定。另一个是给我们自己用的。

选择类的表单元素组件

　　选择类指的是多选组（checkbox）、单选组（radio）、复选框（checkbox）以及下拉列表框。

1. Vue.component('my-input', {

2. props:["value","meta"],

3. methods:{

4. //select

5. selectChange:function(event, meta){

6. var returnValue = '';

7. var items = event.target.selectedOptions; //选中项的集合

8. var arr = [];

9. for (var i=0;i<items.length;i++) {

10. var item = items[i];

11. arr.push(item.value);

12. }

13. returnValue = arr.join(',');

14. //添加联动事件

15. this.$emit('select', returnValue, meta.nextSelect);

16. //vue的回调

17. this.$emit('input',returnValue);

18. return returnValue;

19. },

20. //CheckBox

21. checkChange: function (event) {

22. var returnValue = event.target.value;

23. if (this.meta.controlType === 155) {

24. //复选框

25. returnValue = event.target.checked;

26. }

27. else{

28. //修改绑定情况

29. var selectValue = returnValue;

30. var arr = [];

31. for (var key in this.meta.list) {

32. var item = this.meta.list[key];

33. if (item.id === selectValue) {

34. this.meta.list[key].check = event.target.checked;

35. }

36. if (item.check) {

37. arr.push(item.id);

38. }

39. }

40. returnValue = arr.join(',');

41. }

42. //调用上级的input事件

43. this.$emit('input',returnValue);

44. return returnValue;

45. },

46. //radio

47. radioChange: function (event, meta) {

48. //单选

49. var returnValue = '';

50. var items = event.target.selectedOptions; //选中项的集合

51. var arr = [];

52. for (var i=0;i<items.length;i++) {

53. var item = items[i];

54. arr.push(item.id);

55. }

56. returnValue = arr.join(',');

57. this.$emit('select', returnValue, meta.nextSelect); //添加联动事件

58. return returnValue;

59. }

60. },

61. template: `<span>

62. <span v-else-if="meta.controlType >= 150 && meta.controlType <= 152 ">

63. <!--下拉列表框-->

64. <select :id="'c'+meta.controlId"

65. :name="'c'+meta.controlId"

66. :class="meta.class"

67. :multiple="meta.controlType === 151"

68. @change="selectChange($event,meta)"

69. >

70. <option :key="-2" value="-2" >请选择</option>

71. <option

72. v-for="(item,index) in meta.list"

73. :key="index"

74. :value="item.id"

75. :selected="item.check">

76. {{item.name}}

77. </option>

78. </select>

79. </span>

80. <span v-else-if="meta.controlType === 153 ">

81. <!--单选组 -->

82. <label role="radio" v-for="item in meta.list" >

83. <input

84. type="radio"

85. :class="meta.class"

86. :checked="item.check"

87. :name="'c'+meta.controlId"

88. :value="item.id"

89. @input="$emit('input',$event.target.value)"

90. >

91. <span>{{item.name}}</span>

92. </label>

93. </span>

94. <span v-else-if="meta.controlType === 154 ">

95. <!--多选组-->

96. <label role="checkbox"

97. v-for="item in meta.list"

98. class="checkbox_g_t"

99. :key="'lblchks'+item.id" >

100. <input :id="'c'+meta.controlId"

101. type="checkbox"

102. :name="'c'+meta.controlId"

103. :class="meta.class"

104. :value="item.id"

105. :readonly="meta.readonly"

106. :key="'chks'+item.id"

107. @input="checkChange($event)"

108. >

109. <span>{{item.name}}</span>

110. </label>

111. </span>

112. <span v-else-if="meta.controlType === 155 ">

113. <!--复选框-->

114. <label role="checkbox"

115. v-for="item in meta.list"

116. class="checkbox_g_t"

117. :key="'lblchk'+item.id" >

118. <input :id="'c'+meta.controlId"

119. type="checkbox"

120. :name="'c'+meta.controlId"

121. :class="meta.class"

122. :value="item.id"

123. :readonly="meta.readonly"

124. :key="'chk'+item.id"

125. @input="checkChange($event)"

126. >

127. <span>{{item.name}}</span>

128. </label>

129. </span>

130. </span>`

131. });

1. 模板
    　　还是老办法，用v-if判断渲染哪个模板，然后还是一个一个赋值，然后选项有一个循环，v-for一下就可以了。这里的选项格式和文本框的备选项格式采用了相同的设置。这样统一一下比较方便。

2. 方法
    　　每类控件都做一个方法，对应不同的取值方式。不知道有没有更好的方式，现在用的比较麻烦，期待更好的方法。如果发现了肯定会更新的。

   
   　　还有个返回值类型的问题，我是习惯返回字符串的形式，比如1,2,3 。而不是数组。因为数据库里保存的是字符串而不是数组。当然这块应该能够灵活一些，打算加一个返回值类型的设置。

辅助工具

　　这么复杂的json要怎么弄？不会告诉我要手撸吧！当然不是，我这么懒怎么能手写呢，当然是弄个工具来辅助了。

　　辅助工具的思路，首先确定要哪种类型的表单元素，然后根据类型显示需要设置的属性，然后就可以点点点了（当然有些属性需要打几个字），就可以生成json文件，同时还可以预览效果。

　　这个只是第一步哦，后面的还会有根据文档生成的辅助工具。

　　文档在哪里？做项目总会有个数据库文档吧，文档会描述都有啥表，啥字段。会介绍一下字段名称、字段类型、字段大小吧。这样我们就可以根据这些信息设置默认的json了。然后不能默认的再点点点一下就可以了。

　　这个辅助工具就是用的这个表单元素组件写的，也算是一个实际应用，代码比较多，就不贴了。感兴趣的话，看下面开源介绍。

开源

　　源码下载：https://github.com/naturefwvue

　　在线演示：https://naturefwvue.github.io/form/formHelp.html

　　这里是表单元素组件源码和demo，还有那个辅助工具。

　　另外会保持持续更新的，毕竟现在还只是初步学习vue实现的也只是简单的功能。

　　下图是辅助工具的页面，首先选择类型，然后预留会有变化，然后按照下面的属性选择即可，同时预览也会有对应的变化。

　　最后感谢大家的支持！

本文作者：金色海洋

个人网址：jyk.cnblogs.com

声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。

写的不错？赞赏一下

长按扫码赞赏我